<template>
  <view class="page-container">
    <view class="station-detail-page">
      <view class="station-item">
        <view class="station-info">
          <view class="plate-title">车牌号码</view>
          <view class="plate-desc">
            请正确填写<text class="plate-desc-highlight">本次充电车辆</text>的车牌号，可减免部分停车费
          </view>
            <car-plate-edit @listenPlateChange="listenPlateChange" :plateType="3" :defaultPlate='plateNumber'></car-plate-edit>
          
          <!-- 设为默认车辆选项 -->
          <view class="default-vehicle-container">
            <view class="default-vehicle-item" @click="toggleDefaultVehicle">
              <view :class="['default-vehicle-checkbox', { 'checked': isDefaultVehicle }]">
                <text v-if="isDefaultVehicle" class="checkmark">✓</text>
              </view>
              <text class="default-vehicle-text">设为默认车辆</text>
            </view>
          </view>
            <!--
            <view
              v-for="(item, idx) in 7"
              :key="idx"
              :class="['plate-input', plateActiveIndex === idx ? 'active' : '']"
              @click="plateActiveIndex = idx"
            ></view>
            -->
        </view>
      </view>
    </view>
    <view class="submit-btn-container">
      <view class="agreement-container" v-if="!isEdit">
        <view class="agreement-item" @click="toggleAgreement">
          <view :class="['agreement-checkbox', { 'checked': isAgreed }]">
            <text v-if="isAgreed" class="checkmark">✓</text>
          </view>
          <text class="agreement-text">
            我已阅读并同意<text class="agreement-link" @click.stop="openAgreement">《个人信息处理授权书》</text>
          </text>
        </view>
      </view>
      <view class="action-buttons" v-if="isEdit">
        <view class="delete-btn" @click="deleteVehicle">删除</view>
        <view class="save-btn" @click="submitForm">保存</view>
      </view>
      <view class="prepay-btn" v-else @click="submitForm">提交</view>
    </view>
  </view>
</template>

<script>
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
import uniSwiperDot from '@/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue'
import carPlateEdit from '@/components/licensePlate/index.vue'
import { addMyNewCar, deleteMyNewCar, editCarNumber } from '@/api/index/index.js'

export default {
  components: {
    uniPopup,
    uniSwiperDot,
    carPlateEdit
  },
  data() {
    return {
      plateNumber: ['', '', '', '', '', '', '', ''], //需要设置的默认车牌
      plate: '', //输入的车牌
      plateActiveIndex: 0, // 当前选中的输入框索引
      current: 0,
      imgList: [
        { url: '/pagesOne/static/images/3.png' },
        { url: '/static/images/4.png' },
        { url: '/static/images/5.png' }
      ],
      detailStation: {
        name: '[菲兹充电] 七莘路充电站-B',
        facilities: '直流 ｜120.0kw ｜枪编号：442',
        price: '1.05',
        status: 'available',
        availableCount: 3,
        totalCount: 4
      },
      pileList: [
        { status: '空闲', code: '12269225', power: '120kW' },
        { status: '占用', code: '12269226', power: '90kW' },
        { status: '80%', code: '12269227', power: '60kW' }
      ],
      priceList: [
        {
          range: '00:00-06:00',
          vipPrice: '0.8500',
          vipPowerPrice: '0.3100',
          vipServicePrice: '0.5400',
          originalPrice: '1.2000',
          originalPowerPrice: '0.6900',
          originalServicePrice: '0.5100',
          isLowest: true
        },
        {
          range: '06:00-08:00',
          vipPrice: '0.8900',
          vipPowerPrice: '0.3100',
          vipServicePrice: '0.5800',
          originalPrice: '1.3000',
          originalPowerPrice: '0.7100',
          originalServicePrice: '0.5900',
          isLowest: false
        },
        {
          range: '08:00-10:00',
          vipPrice: '0.9900',
          vipPowerPrice: '0.3500',
          vipServicePrice: '0.6400',
          originalPrice: '1.4000',
          originalPowerPrice: '0.7900',
          originalServicePrice: '0.6100',
          isLowest: false
        },
        {
          range: '10:00-12:00',
          vipPrice: '0.9900',
          vipPowerPrice: '0.3500',
          vipServicePrice: '0.6400',
          originalPrice: '1.4000',
          originalPowerPrice: '0.7900',
          originalServicePrice: '0.6100',
          isLowest: false
        },
        {
          range: '12:00-17:00',
          vipPrice: '0.9500',
          vipPowerPrice: '0.3300',
          vipServicePrice: '0.6200',
          originalPrice: '1.3500',
          originalPowerPrice: '0.7500',
          originalServicePrice: '0.6000',
          isLowest: false
        },
        {
          range: '17:00-24:00',
          vipPrice: '0.8900',
          vipPowerPrice: '0.3100',
          vipServicePrice: '0.5800',
          originalPrice: '1.3000',
          originalPowerPrice: '0.7100',
          originalServicePrice: '0.5900',
          isLowest: false
        }
      ],
      prepayValue: 50,
      customPrepay: '',
      isAgreed: false, // 新增：协议同意状态
      isEdit: false, // 新增：是否为编辑模式
      carId: '', // 新增：车辆ID（编辑时使用）
      isDefaultVehicle: false, // 新增：是否设为默认车辆
    }
  },
  onLoad(options) {
    // 检查是否为编辑模式
    if (options.carData) {
      try {
        const carData = JSON.parse(decodeURIComponent(options.carData));
        this.isEdit = true;
        this.carId = carData.id;
        
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: '修改车辆'
        });
        
        // 自动填入车牌号
        if (carData.carNumber) {
          this.plate = carData.carNumber;
          // 将车牌号转换为数组格式
          this.plateNumber = carData.carNumber.split('');
          // 补齐到8位
          while (this.plateNumber.length < 8) {
            this.plateNumber.push('');
          }
        }
        this.isDefaultVehicle = carData.isDefault; // 设置默认车辆状态
      } catch (error) {
        console.error('解析车辆数据失败:', error);
      }
    } else {
      // 添加模式，设置页面标题
      uni.setNavigationBarTitle({
        title: '添加车辆'
      });
    }
  },
  mounted() {
    // 确保popup组件已经准备好
    setTimeout(() => {
      if (this.$refs.pricePopup) {
        console.log('价格弹窗组件已加载');
      }
    }, 100);
  },
  methods: {
    onSwiperChange(e) {
      this.current = e.detail.current;
    },
    onPriceDetail() {
      uni.navigateTo({
        url: '/pages/price-detail/index'
      });
    },
    listenPlateChange(value) {
      this.plate = value.join('')
    },
    // 车牌合法性校验（支持普通7位与新能源8位）
    validatePlate(plate) {
      if (!plate) return { ok: false, msg: '请输入车牌号' };
      const province = '京沪津渝冀晋蒙辽吉黑苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云藏陕甘青宁新临';
      const provRe = new RegExp('^[' + province + ']');
      const secondRe = /^[\u4e00-\u9fa5A-Z]/; // 组件已限制为字母，这里宽松一些
      const tailAllowed = /^[A-Z0-9挂学警港澳领]+$/;
      const p = plate.toUpperCase();
      // 基础位数判断
      if (p.length !== 7 && p.length !== 8) {
        return { ok: false, msg: '车牌长度不正确' };
      }
      // 省份简称与第二位
      if (!provRe.test(p[0])) {
        return { ok: false, msg: '车牌首位应为省份简称' };
      }
      if (!/[A-Z]/.test(p[1])) {
        return { ok: false, msg: '车牌第二位应为字母' };
      }
      // 新能源规则（8位）：开头必须为汉字，第二位必须为字母，剩余6位不可为汉字
      if (p.length === 8) {
        // 检查第一位是否为汉字（省份简称）
        if (!provRe.test(p[0])) {
          return { ok: false, msg: '8位车牌首位应为省份简称' };
        }
        // 检查第二位是否为字母
        if (!/[A-Z]/.test(p[1])) {
          return { ok: false, msg: '8位车牌第二位应为字母' };
        }
        // 检查中间5位是否包含汉字（不包含最后一位）
        const middleChars = p.substring(2, 7); // 取第3-7位，不包含最后一位
        const hasChinese = /[\u4e00-\u9fa5]/.test(middleChars);
        if (hasChinese) {
          return { ok: false, msg: '8位车牌中间5位不可包含汉字' };
        }
        // 检查最后一位是否允许的字符（字母、数字、挂学警港澳领）
        const lastChar = p[7];
        const allowedLastChars = /[A-Z0-9挂学警港澳领]/;
        if (!allowedLastChars.test(lastChar)) {
          return { ok: false, msg: '8位车牌最后一位格式不正确' };
        }
        return { ok: true };
      }
      // 普通车牌（7位）：[省][A-Z][A-Z0-9]{4}[A-Z0-9挂学警港澳领]
      const normal = new RegExp('^[' + province + '][A-Z][A-Z0-9]{4}[A-Z0-9挂学警港澳领]$');
      if (!normal.test(p)) {
        return { ok: false, msg: '车牌格式不正确' };
      }
      return { ok: true };
    },
    onCopyCode(code) {
      uni.setClipboardData({
        data: code,
        success: () => {
          uni.showToast({ title: '已复制', icon: 'none' });
        }
      });
    },
    showPriceDetail() {
      if(this.$refs.pricePopup) {
        console.log('打开价格详情弹窗');
        this.$refs.pricePopup.open('bottom');
      } else {
        console.log('价格弹窗组件未找到');
      }
    },
    hidePriceDetail() {
      if(this.$refs.pricePopup) {
        this.$refs.pricePopup.close();
      }
    },
    selectPrepay(val) {
      this.prepayValue = val
    },
    toggleAgreement() {
      this.isAgreed = !this.isAgreed;
    },
    openAgreement() {
      uni.navigateTo({
        url: '/pages/consent/consent'
      });
    },
    toggleDefaultVehicle() {
      this.isDefaultVehicle = !this.isDefaultVehicle;
    },
    submitForm() {
      // 检查是否勾选了协议（仅在添加车辆时检查）
      if (!this.isEdit && !this.isAgreed) {
        uni.showToast({
          title: '请先勾选个人信息处理授权书',
          icon: 'none'
        });
        return;
      }
      
      const carNumber = (this.plate || '').toUpperCase();
      const check = this.validatePlate(carNumber);
      if (!check.ok) {
        uni.showToast({ title: check.msg, icon: 'none' });
        return;
      }

      if (this.isEdit) {
        editCarNumber({ id: this.carId, carNumber, isDefault: this.isDefaultVehicle }).then(res => {
          if (res && res.success) {
            uni.showToast({ title: '修改成功', icon: 'success' });
            // 触发刷新车辆列表事件
            this.$emit('refreshCarList');
            setTimeout(() => { uni.navigateBack(); }, 1000);
          } else {
            uni.showToast({ title: res.msg || '修改失败', icon: 'none' });
          }
        }).catch(err => {
          uni.showToast({ title: (err && err.msg) || '网络错误', icon: 'none' });
        });
      } else {
        addMyNewCar({ carNumber, isDefault: this.isDefaultVehicle }).then(res => {
          if (res && res.success) {
            uni.showToast({ title: '绑定成功', icon: 'success' });
            // 触发刷新车辆列表事件
            this.$emit('refreshCarList');
            setTimeout(() => { uni.navigateBack(); }, 1000);
          } else {
            uni.showToast({ title: res.msg || '绑定失败', icon: 'none' });
          }
        }).catch(err => {
          uni.showToast({ title: (err && err.msg) || '网络错误', icon: 'none' });
        });
      }
    },
    deleteVehicle() {
      uni.showModal({
        title: '提示',
        content: '确定要删除此车辆吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用删除接口
            const carNumber = this.plate || '';
            if (!carNumber) {
              uni.showToast({
                title: '车牌号不能为空',
                icon: 'none'
              });
              return;
            }
            
            deleteMyNewCar({ carNumber }).then(res => {
              if (res && res.success) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
                // 触发刷新车辆列表事件
                this.$emit('refreshCarList');
                setTimeout(() => {
                  uni.navigateBack();
                }, 1000);
              } else {
                uni.showToast({
                  title: res.msg || '删除失败',
                  icon: 'none'
                });
              }
            }).catch(err => {
              uni.showToast({
                title: (err && err.msg) || '网络错误',
                icon: 'none'
              });
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fbfbfb;
}

.station-detail-page {
  background: #fbfbfb;
  flex: 1;
  padding: 0;
}

.swiper-wrapper {
  background: #fff;
  border-radius: 18rpx;
  padding: 20rpx;
  margin: 20rpx auto;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
}
.swiper-img {
  width: 100%;
  height: 300rpx;
  display: block;
  border-radius: 12rpx;
}
.station-jam {
  background: linear-gradient(180deg, #b97a56 0%, #eac9b0 100%);
  border-bottom-right-radius: 16rpx;
  padding: 0 24rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5rpx;
  left: -5rpx;
}
.station-jam-text {
  color: #fff;
  font-size: 22rpx;
  font-weight: bold;
}
.station-item {
  width: 85%;
  margin: 20rpx auto 20rpx auto;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  padding: 30rpx;
  position: relative;
}
.station-info {
  flex: 1;
}
.station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}
.station-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.station-distance {
  display: flex;
  align-items: center;
  border: 1rpx solid #e5e5e5;
  border-radius: 24rpx;
  padding: 4rpx 8rpx;
}
.distance-text {
  font-size: 24rpx;
  color: #666;
}
.station-details {
  margin-bottom: 15rpx;
}
.station-facilities {
  font-size: 24rpx;
  color: #666;
}
.divider-line {
  height: 1rpx;
  background-color: #eee;
  margin: 15rpx 0;
}
.station-pricing {
  display: flex;
  align-items: baseline;
}
.price-label {
  font-size: 24rpx;
  color: #ff6b35;
}
.price-amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
}
.price-unit {
  font-size: 24rpx;
  color: #ff6b35;
  margin-right: 20rpx;
}
.station-rating {
  display: flex;
  align-items: center;
  background: none;
  padding: 0;
  width: fit-content;
  background: #c0601b;
  border-radius: 8rpx;
}
.station-rating-icon {
  width: 48rpx;
  height: 36rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c0601b;
  border: 1rpx solid #ca7531;
  margin-right: 0;
}
.station-rating-p {
  color: #f8e5a8;
  font-weight: bold;
  font-size: 24rpx;
}
.station-rating-rate {
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
}
.station-rating-text-bg {
  background: #c0601b;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}
.station-rating-text-numBg{
  background: #fff7f5;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}
.station-rating-text {
  color: #f8e5a8;
  font-size: 22rpx;
}
.station-rating-text-num {
  color: #ff6b35;
  font-size: 20rpx;
  font-weight: bold;
}
.vip-1{
  color: #c47a48;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  height: 40rpx;
  margin-left: 15rpx;
}
.vip-2{
  color: #ff6600;
}
.vip-3{
  color: #c47a48;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  height: 40rpx;
  margin-top: 5rpx;
}
.vip-btn {
  background: linear-gradient(90deg, #fc5734 0%, #fc356b 100%);
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 36rpx;
  border-radius: 36rpx;
  text-align: center;
  height: 50rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.station-status {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.member-price-badge {
  display: inline-flex;
  align-items: center;
  height: 36rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
.member-price-label {
  background: #ff6b35;
  color: #fff;
  font-size: 18rpx;
  font-weight: bold;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  border-radius: 8rpx 0 0 8rpx;
  box-sizing: border-box;
}
.member-price-value {
  position: relative;
  background: #fff;
  color: #ff6b35;
  font-size: 18rpx;
  font-weight: bold;
  padding: 0 16rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  border-radius: 0 8rpx 8rpx 0;
  border: 2rpx solid #ff6b35;
  border-left: none;
  box-sizing: border-box;
}
.fast-charge-badge {
  display: inline-flex;
  align-items: center;
  height: 54rpx;
  border-radius: 8rpx;
  overflow: hidden;
  flex: 1;
}
.fast-charge-label {
  background: #ff6b35;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 0 12rpx;
  height: 54rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx 0 0 8rpx;
  box-sizing: border-box;
  flex: 0.2;
}
.fast-charge-value {
  position: relative;
  background: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 0 16rpx;
  height: 54rpx;
  display: flex;
  align-items: center;
  border-radius: 0 8rpx 8rpx 0;
  border: 2rpx solid #ff6b35;
  border-left: none;
  box-sizing: border-box;
  flex: 0.8;
  padding-left: 20rpx;
}
.power-text {
  font-size: 20rpx;
  margin-left: auto;
  color: #666;
}
.member-price-value::before {
  content: '';
  position: absolute;
  left: -12rpx;
  top: 0;
  width: 24rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 18rpx 0 0 18rpx;
  z-index: 1;
}
.price-section {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
}
.price-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  width: 100%;
}
.parking-fee {
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
}
.price-section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.price-section-time {
  font-size: 24rpx;
  color: #666;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
.price-section-detail {
  font-size: 24rpx;
  color: #666;
  display: flex;
  align-items: center;
}
.price-cards {
  display: flex;
  justify-content: space-between;
  gap: 8rpx;
}

.price-card {
  flex: 1;
  background: linear-gradient(135deg, #fff9f0 0%, #fff7e6 100%);
  border-radius: 20rpx;
  padding: 24rpx 28rpx 24rpx 28rpx;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  min-width: 0;
}

.origin-price {
  flex: 3.5;
  /* 右侧向左倾斜 */
  /*clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%); */
}

.vip-price {
  flex: 6.5;
  /* 左侧向右倾斜 */
  /*clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%);*/
}

.price-card-label {
  font-size: 24rpx;
  color: #ff6b35;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.vip-price .price-card-label {
  color: #333;
}

.price-card-value {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.price-card-num {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
}
.price-card-unit {
  font-size: 20rpx;
  color: #666;
}
.price-card-btn {
  background: #ff6b35;
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-left: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pile-info-row {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}
.pile-status-circle {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  border: 4rpx solid #7ac143;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}
.pile-status-text {
  color: #7ac143;
  font-size: 22rpx;
}
.pile-info-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pile-info-line {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}
.pile-info-bold {
  font-weight: bold;
  margin: 0 8rpx;
}
.facility-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20rpx;
}
.facility-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10rpx 15rpx;
}
.facility-item uni-icons {
  margin-bottom: 8rpx;
}
.facility-item text {
  font-size: 20rpx;
  color: #666;
}

.parking-free-card {
  border-radius: 16rpx;
  margin: 24rpx 0 0 0;
  padding: 24rpx 0 0 0;
  box-shadow: none;
}
.parking-free-header {
  display: flex;
  align-items: flex-start;
}
.parking-icon-bg {
  width: 56rpx;
  height: 56rpx;
  background: #e6f0fa;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18rpx;
}
.parking-icon {
  color: #4a90e2;
  font-size: 36rpx;
  font-weight: bold;
}
.parking-free-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.parking-free-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: baseline;
}
.free-time {
  font-size: 22rpx;
  font-weight: normal;
  margin-left: 8rpx;
}
.orange {
  color: #ff6b35;
  font-weight: bold;
}
.gray {
  color: #888;
}
.red {
  color: #ff6b35;
  font-weight: bold;
}
.parking-free-desc {
  font-size: 22rpx;
  color: #999;
  margin-top: 6rpx;
}
.parking-free-bottom {
  margin-top: 18rpx;
  background: #fef9f3;
  border-radius: 0 0 16rpx 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 24rpx;
}
.parking-free-tip {
  color: #c47a48;
  font-size: 24rpx;
}
.parking-free-btn {
  color: #c47a48;
  font-size: 24rpx;
  font-weight: bold;
  padding: 6rpx 28rpx;
}

.prepay-section {
  display: flex;
  margin-bottom: 20rpx; 
  background: #fff;
  border-radius: 18rpx;
}

.prepay-title {
  flex:2;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  height: 70rpx;
  display: flex;
  align-items: center;
}

.prepay-tabs {
  flex:6;
  display: flex;
  justify-content: flex-end;
  gap: 10rpx;
  border-radius: 12rpx;
  height: 80rpx;
}

.prepay-tab {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #000000;
  padding: 11rpx 16rpx;
  border-radius: 12rpx;
  background: #f5f5f5;
  text-align: center;
  position: relative;
  height: 50rpx;
  width: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prepay-tab.active {
  background: #ff6b35;
  color: #fff;
  border-color: #ff6b35;
}

.prepay-tab.disabled {
  color: #ccc;
  border-color: #e5e5e5;
  background: #f5f5f5;
}

.prepay-btn {
  background: #ff6b35;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 12rpx 24rpx;
  border-radius: 12rpx;
  text-align: center;
  height: 50rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prepay-input {
  width: 80rpx;
  border: none;
  background: transparent;
  color: #333;
  font-size: 24rpx;
  text-align: center;
  outline: none;
}
.prepay-tab:not(.active) .prepay-input {
  color: #ccc;
}

.price-popup-content {
  background-color: #fff;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  border-radius: 24rpx 24rpx 0 0;
}

.price-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 30rpx;
  border-bottom: 1rpx solid #eee;
}

.price-popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.price-table {
  padding: 20rpx 0;
  width: 95%;
  margin: 0 auto;
}

.table-header {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  height: 60rpx;
  font-size: 24rpx;
  color: #333;
  text-align: center;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.lowest-tag {
  position: absolute;
  top: 18rpx;
  left: 0rpx;
  background: #ff6b35;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  transform: translateY(-50%);
}

.th, .td {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.time-col {
  flex: 2;
  text-align: left;
}

.type-col {
  flex: 1.5;
}

.price-col, .power-col, .service-col {
  flex: 1.5;
}

.equal-col, .plus-col {
  flex: 0.5;
}

.unit {
  font-size: 20rpx;
  color: #999;
  margin-left: 4rpx;
}

.vip-tag {
  background: #ff6b35;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  margin-bottom: 4rpx;
}

.price-type {
  color: #999;
  font-size: 20rpx;
}

.price-value {
  color: #ff6b35;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.original-price {
  color: #999;
  font-size: 20rpx;
  text-decoration: line-through;
}

.price-notice {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 8rpx;
  margin-top: 30rpx;
}

.notice-text {
  font-size: 22rpx;
  color: #999;
  line-height: 1.4;
  margin-left: 8rpx;
  flex: 1;
}

.flex-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.coupon-card {
  width: 220rpx;
  height: 150rpx;
  background: linear-gradient(90deg, #fe6445 0%, #fc4568 100%);
  border-radius: 24rpx;
  border: 2rpx solid #ffb199;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  position: relative;
  margin: 0 auto;
  padding: 5rpx;
  box-sizing: border-box;
}

.coupon-top {
  width: 100%;
  border-radius: 24rpx 24rpx 0 0;
  background: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 70rpx;
  position: relative;
  z-index: 2;
  box-shadow: 0 2rpx 8rpx rgba(255, 153, 0, 0.05);
}

.coupon-num {
  color: #ff5e3a;
  font-size: 38rpx;
  font-weight: bold;
}
.coupon-mul {
  color: #ff5e3a;
  font-size: 28rpx;
  margin: 0 8rpx;
}
.coupon-count {
  color: #ff5e3a;
  font-size: 38rpx;
  font-weight: bold;
}

.coupon-bottom {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  position: absolute;
  bottom: 18rpx;
  left: 0;
  letter-spacing: 2rpx;
}

.coupon-arc {
  width: 100%;  
  height: 80rpx;
  background: #fff;
  margin: auto 0;
  position: relative;
  clip-path: ellipse(50% 20% at 50% 0%);
  z-index: 1;
  margin-bottom: 10rpx;
}

.plate-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #111;
  margin-bottom: 18rpx;
}
.plate-desc {
  font-size: 24rpx;
  color: #888;
  margin-bottom: 32rpx;
}
.plate-desc-highlight {
  color: #ff7b1a;
  font-weight: bold;
}
.plate-inputs {
  display: flex;
  gap: 18rpx;
  margin-top: 10rpx;
}
.plate-input {
  width: 56rpx;
  height: 56rpx;
  border-radius: 12rpx;
  border: 2rpx solid #e5e5e5;
  background: #fff;
  box-sizing: border-box;
}
.plate-input.active {
  border-color: #ff7b1a;
  background: #fff7f0;
}

.submit-btn-container {
  width: 100%;
  padding: 20rpx;

  box-sizing: border-box;
}

.agreement-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
}

.agreement-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.agreement-checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
  background-color: #fff;
}

.agreement-checkbox.checked {
  border-color: #ff6b35;
  background-color: #ff6b35;
}

.checkmark {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

.agreement-link {
  color: #ff6b35;
  text-decoration: underline;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
}

.delete-btn, .save-btn {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  padding: 12rpx 24rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-btn {
  background: #999;
  color: #fff;
  border: 1rpx solid #999;
}

.save-btn {
  background: #ff6b35;
  color: #fff;
  border: 1rpx solid #ff6b35;
}

.default-vehicle-container {
  margin-top: 20rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
}

.default-vehicle-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10rpx;
}

.default-vehicle-checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
  background-color: #fff;
}

.default-vehicle-checkbox.checked {
  border-color: #ff6b35;
  background-color: #ff6b35;
}

.default-vehicle-text {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

.default-vehicle-desc {
  font-size: 20rpx;
  color: #999;
  margin-left: 40rpx;
  margin-top: 5rpx;
}

</style> 